<template>
  <el-dialog
    class="public-dialog"
    title="退税"
    width="500"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="h-[460px] mt-[16px]">
      <el-form
        ref="formRef"
        label-position="top"
        label-width="100px"
        :model="formData"
        class="form-components"
        :rules="rules"
      >
        <el-form-item label="退税状态" prop="return_tax_status">
          <el-select
            v-model="formData.return_tax_status"
            placeholder="请选择退税状态"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in optionsData.out_return_tax_status"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="退税批次">
          <el-input
            v-model="formData.return_tax_batch"
            placeholder="请输入退税批次"
          />
        </el-form-item>
        <el-form-item label="退税提交时间">
          <el-date-picker
            v-model="formData.return_tax_apply_time"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="退税到账时间">
          <el-date-picker
            v-model="formData.return_tax_amount_arrival_time"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="formData.return_remark"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import VForm from "@/components/Form/index.vue";

import { statisticTaxReturn } from "../../api/index.js";
import { tipMessage } from "@/hooks/tool.js";
const props = defineProps({
  id: { type: [String,Number], default: '' },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  optionsData: { type: Object, default: () => {} },
});
const { optionsData, id } = toRefs(props);
const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const formData = reactive({
  return_tax_status: null,
  return_tax_batch: null,
  return_tax_apply_time: null,
  return_tax_amount_arrival_time: null,
  return_remark: null,
});
const rules = {
  return_tax_status: [
    { required: true, message: "请选择退税状态", trigger: ["blur", "change"] },
  ],
};

const formRef = ref();
const model = ref({});
const loading = ref();
const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      const _model = JSON.parse(JSON.stringify(formData));
      if (valid) {
        resolve(_model);
      } else {
        reject(false);
      }
    });
  });
};

const handleSave = async () => {
  try {
    const formInfo = await submit();
    if (!id.value) return;
    const { code, message, data } = await statisticTaxReturn({
      id: id.value,
      ...formInfo,
    });
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    tipMessage(data);
    handleClose(true);
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleClose = async (refresh) => {
  for(let key in formData) {
    formData[key] = null;
  }
  await nextTick();
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
